<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2749375_rckhgrunr9j.css">
    <link rel="stylesheet" href="./css/animate.css">
    
</head>

<body>
    <div class="divID">
        <p class="m-12 font-bold">组件</p>
        <div class="m-12">
            <input type="text" placeholder="请输入">
        </div>
        <div class=" m-12">
            <button class="button" type="button">主要按钮</button>
        </div>
        <div class=" m-12">
            <div class="Stepper flex">
                <div class="but flex align-v-center align-h-center"><i class=" iconfont icon-jianhsao"></i></div>
                <input type="text" value="1" class=" m-lr-4">
                <div class="but flex align-v-center align-h-center"><i class=" iconfont icon-zengjia"></i></div>
            </div>
        </div>
        <div class=" m-12">
            <label for="checkbox" class=" m-r-16">
                <input type="checkbox" name="" id="checkbox">
                <span>多选</span>
            </label>
        </div>
        <div class=" m-12 flex">
            <label for="radio1" class=" m-r-16 flex align-v-center">
                <input type="radio" name="radio" id="radio1">
                <span class=" m-l-8 font-18">单选</span>
            </label>
            <label for="radio2" class="flex align-v-center">
                <input type="radio" name="radio" id="radio2">
                <span class=" m-l-8 font-18">单选</span>
            </label>
        </div>
        <div class="m-12">
            <div class="tag font-14">
                <span>标签</span>
            </div>
        </div>
        <div class="m-12">
            <div class="calendar calendar-1">
                <div class="calendar-select">
                    <input type="text" name="" id="" class="calendar-input" placeholder="选择日期" value="2020-3-5">
                    <i class="iconfont calendar-icon  icon-rili"></i>
                </div>
            </div>
        </div>
        <div class="m-12">
            <div class="calendar calendar-2">
                <div class="calendar-select">
                    <input type="text" name="" id="" class="calendar-input" placeholder="选择日期" value="2020-3-5">
                    <i class="iconfont calendar-icon  icon-rili"></i>
                </div>
            </div>
        </div>
        <div class=" m-12">
            <div class="dropDown">
                <div class="dropDown-select">
                    <input type="hidden" name="" id="" class="hidden-input" >
                    <input type="text" name="" id="" class="select-input" value="香蕉">
                    <i class="iconfont dropDown-icon  icon-xiajiantou "></i>
                </div>
                <ul class="dropDown-card p-12 fadeInDown animated" style="display: none;">
                    <!-- 循环下拉内容 -->
                    <!-- <li class="dropDown-item p-12 ${this.value == arr[i].value ? 'dropDown-active' : ''}">${arr[i].value}</li> -->
                    <li data-id="0" class="dropDown-item p-12 dropDown-active">苹果</li>
                    <li data-id="1" class="dropDown-item p-12">香蕉</li>
                    <li data-id="2" class="dropDown-item p-12">香蕉01</li>
                    <li data-id="3" class="dropDown-item p-12">香蕉02</li>
                    <li data-id="4" class="dropDown-item p-12">香蕉03</li>
                    <li data-id="5" class="dropDown-item p-12">香蕉04</li>
                    <li data-id="6" class="dropDown-item p-12">香蕉05</li>
                    <li data-id="7" class="dropDown-item p-12">香蕉06</li>
                    <li data-id="8" class="dropDown-item p-12">香蕉07</li>
                    <li data-id="9" class="dropDown-item p-12">香蕉08</li>
                </ul>

            </div>
        </div>

    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/calendar.js"></script>
    <script src="./js/drop-down.js"></script>
    <script>
        var calendar1 = new Calendar('.calendar-1');
        var calendar2 = new Calendar('.calendar-2');
        var dropdown = new Dropdown('.dropDown');
    </script>
</body>

</html>